<template>
  <div class="fastReply posi_r bs_bdb flex_colm" v-if="store.isQuickReply">
    <div v-if="true">
      <div class="title flex_bt bs_bdb">
        <div>
          <div
            v-if="store.swithQuickShow"
            class="left_btn fs_12 fff bs_bdb cur_poi"
            @click="store.swithQuickShow = !store.swithQuickShow"
          >
            添加
          </div>
          <img
            v-if="!store.swithQuickShow"
            @click="store.swithQuickShow = !store.swithQuickShow"
            style="width: 9px; height: 16px; padding: 15px"
            src="../assets/quick_4.png"
            alt=""
          />
        </div>

        <div class="fff fs_16">快捷回复语</div>
        <div class="right_close cur_poi bs_bdb" @click="quickReply(0)">
          <img
            style="width: 25px; height: 25px"
            src="../assets/close_head.png"
            alt=""
          />
        </div>
      </div>
      <div class="content" v-if="!store.swithQuickShow">
        <div>
          <el-input
            v-model="additonMsg"
            resize="none"
            :rows="7"
            type="textarea"
            placeholder="发送信息"
          />
        </div>

        <div class="fs_13 add_btn bs_bdb fff" @click="handleSureAdd">
          确认添加
        </div>
      </div>
      <div class="content bs_bdb fff" v-if="store.swithQuickShow">
        <div
          @click="quickReplyMsg(item)"
          class="txt fs_14 cur_poi flex_bt"
          v-for="(item, i) in quickReplyList"
          :key="item.i"
        >
          <div class="txt_inner">
            {{ item.msg }}
          </div>
          <el-popover
            :popper-style="{ 'min-width:': '50px' }"
            placement="bottom"
            :visible="quickVisible[`quickVisible${i}`]"
            :width="50"
            trigger="click"
          >
            <div
              @click="() => ({})"
              class="flex_colm"
              style="justify-content: space-between"
            >
              <div
                @click.stop="moveTopMsg(item, i)"
                class="up_down_flex cur_poi"
                style="margin-bottom: 10px"
              >
                <img
                  style="width: 16px; height: 16px"
                  src="../assets/quick_reply_2.png"
                  alt=""
                />
                移动最前
              </div>
              <div
                @click.stop="deleteMsg(item, i)"
                class="up_down_flex cur_poi"
              >
                <img
                  style="width: 16px; height: 16px"
                  src="../assets/quick_reply_3.png"
                  alt=""
                />删除
              </div>
            </div>
            <template #reference>
              <div
                @click.stop="quickVisible[`quickVisible${i}`] = true"
                class="bs_bdb"
                style="padding: 5px 15px"
              >
                <img
                  style="width: 15px; height: 4px"
                  src="../assets/quick_reply_1.png"
                  alt=""
                />
              </div>
            </template>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { useCounterStore } from "../store";
import { addAuickReplyApi, delAuickReplyApi } from "../http";
const store = useCounterStore();
const additonMsg = ref("");
const quickReplyList = ref([
  {
    msg: "美女",
    id: 1,
  },
  {
    msg: "这里怎么玩，我是萌新，求指教",
    id: 2,
  },
  {
    msg: "主播你有什么才艺吗?",
    id: 3,
  },
  {
    msg: "这首BGM叫什么，好好听",
    id: 5,
  },
  {
    msg: "主播主播，下次怎么找到你?",
    id: 4,
  },
  {
    msg: "听你唱歌想打赏，我唱歌别人想打我。",
    id: 6,
  },
  {
    msg: "听你唱歌想打赏，我唱歌别人想打我。",
    id: 7,
  },
  {
    msg: "听你唱歌想打赏，我唱歌别人想打我。",
    id: 8,
  },
]);
const quickVisible = ref({}); //quickVisible
quickReplyList.value.forEach((v, i) => {
  quickVisible.value[`quickVisible${i}`] = false;
});
const quickReply = (e) => {
  if (e) {
    store.isQuickReply = !store.isQuickReply;
  } else {
    store.isQuickReply = false;
    store.swithQuickShow = true;
  }
};
const quickReplyMsg = (val) => {
  console.log("val----------1----------", val);
  store.isQuickReply = false;
};
const handleSureAdd = async () => {
  console.log("handleSureAdd-------------------", additonMsg.value);
  let res = await addAuickReplyApi(additonMsg.value, store.roomLiveInfo.id);
  console.log("addAuickReplyApi-res", res);

  quickReplyList.value.splice(0, 0, { msg: additonMsg.value });
  store.swithQuickShow = true;
};
const moveTopMsg = (e, i) => {
  if (i === 0) return;
  quickReplyList.value.splice(
    0,
    0,
    quickReplyList.value.splice(
      quickReplyList.value.findIndex((v) => v.id === e.id),
      1
    )[0]
  );
  nextTick(() => {
    quickVisible.value[`quickVisible${i}`] = false;
  });
};
const deleteMsg = async (e, i) => {
  console.log("删除:", e, i);
  let res = await delAuickReplyApi(i, store.roomLiveInfo.id);
  console.log("deleteMsg-res", res);
  quickReplyList.value.splice(
    quickReplyList.value.findIndex((v) => v.id === e.id),
    1
  );
  nextTick(() => {
    quickVisible.value[`quickVisible${i}`] = false;
  });
};
</script>

<style scoped lang="scss">
.fastReply {
  width: 335px;
  height: 400px;
  background: #282c2f;
  border-radius: 10px 10px 10px 10px;
  position: absolute;
  bottom: 120px;
  right: 90px;
  padding-top: 13px;
  .title {
    padding: 0 20px;
    .right_close {
      padding: 2px 5px;
    }
    .right_close:hover {
      background: #393d3f;
    }
    .left_btn {
      padding: 7px 15px;
      background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
      border-radius: 50px 50px 50px 50px;
    }
    .left_btn:active {
      box-shadow: 0 0 4px 4px rgb(161, 60, 243, 0.3);
    }
  }
  .content {
    margin: 25px 0;
    overflow-y: auto;
    height: calc(400px - 33px - 50px);
    padding: 0 20px;
    .add_btn {
      margin: 50px auto 44px;
      width: 133px;
      padding: 6px 40px;
      background: #45484b;
      border-radius: 50px 50px 50px 50px;
    }
    .txt:first-child {
      margin-top: 0;
    }
    .txt {
      margin-top: 17px;
      padding-bottom: 9px;
      // width: 292px;
      border-bottom: 1px solid #393b3d;
      .txt_inner {
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 使用省略号代替溢出的文本 */
        max-width: 200px;
      }
    }
  }
}
</style>
